<template>
	<div id="app">
		<div class="view-page" :style="{ height: showTabs ? 'calc(100vh - 54px)' : '100vh' }">
			<keep-alive :include="aliveView">
				<router-view v-if="isRouterAlive" />
			</keep-alive>
		</div>
		<van-tabbar v-show="showTabs" v-model="active" route @change="handletip" active-color="#52C1BA"
			inactive-color="#999999">
			<van-tabbar-item v-for="tab in tabList" :key="tab.router" :to="tab.router">
				<span>{{tab.tabTitle }}</span>
				<template #icon="props">
					<img :src="props.active ? tab.activeIcon : tab.icon" />
				</template>
			</van-tabbar-item>
		</van-tabbar>
	</div>
</template>

<script>

	import { mapState } from "vuex";
	import store from '@/store'

	import Web3 from "web3";

	export default {
		name: "App",
		components: {},
		data() {
			return {
				aliveView: ["pledge", "id", "hashrate", "asset"],
				active: 0,
				invite_code: '',
				chainId: '0x1',

				isRouterAlive:true
			};
		},

		created() {
			console.log("开始初始化用户信息");
			//初始化用户信息
		},
		mounted() {
			this.init();

			this.invite_code = this.getQueryVariable('invite_code');

			// window.onresize = () => {
			// 	return (() => {
			// 		window.screenWidth = document.body.clientWidth;
			// 		console.log(window.screenWidth)
			// 		if(window.screenWidth > 768){
			// 			window.location.href="https://chssgy.net/pc"
			// 		}
			// 	})()
			// }

		},

		computed: {
			...mapState(
				["tabList", "showTabs"]
			),
			...mapState({
				address: state => state.user.address
			})
		},
		watch: {
			'address': function(e) {
        // this.UserLogin(e);
				this.UserInfo(e);
			}
		},
		methods: {
			async init() {
				// 初始化并连接钱包
				await this.$dapp.init(this.chainId, Web3);
				await this.$dapp.enabled();
				const address = this.$dapp.getAddress()
				store.commit('updateUser', {
					address: address
				})

				this.$dapp.onAccountChanged((account) => {
					console.log('当前钱包地址发生变化', account)
					// this.address = account.address
					store.commit('updateUser', {
						address: account.address
					})
				})

				this.$dapp.onNetworkChanged((network) => {
					console.log('当前钱包节点发生变化', network)
					this.chainId = network.chainId
				})

				this.$dapp.onClosed(() => {
					console.log('当前钱包断开连接啦')
					this.message = "已断开连接"
				})
			},
      // async UserLogin(e) {
      //   if(e){
      //     const {err,res} = await this.$request.post("/chss/login", {
      //       username: e,
      //       inviteCode: ""
      //     });
      //     if (err === null) {
      //       // store.commit('updateUser', res);
      //       console.log(res)
      //     }
      //   }
      //   const {err,res} = await this.$request.get("/chss/user/basic_info", {
      //     address: e,
      //     invite_code: this.invite_code
      //   });
      //   if (err === null) {
      //     store.commit('updateUser', res);
      //     console.log(res)
      //   }
      // },
			async UserInfo(e) {
				if(e){
					const {err,res} = await this.$request.get("/chss/user/basic_info", {
						address: e,
						invite_code: this.invite_code
					});
					if (err === null) {
						store.commit('updateUser', res);
						console.log(res)
					}
				}
			},
			getQueryVariable(variable) {
				var query = window.location.search.substring(1);
				var vars = query.split("&");
				for (var i = 0; i < vars.length; i++) {
					var pair = vars[i].split("=");
					if (pair[0] == variable) {
						return pair[1];
					}
				}
				return '';
			},
			reload() {
				this.isRouterAlive = false
				this.UserInfo(this.$dapp.getAddress());
				this.$nextTick(function() {
					this.isRouterAlive = true
				})
			},

			handletip: function() {},

		},
	};
</script>

<style lang="scss">
	@import "../common.scss";

	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		// text-align: center;
		font-size: 28px;
		color: #EEE;
	}

	body {
		background-color: #20283d;
		height:100%;
		overflow:hidden;
	}

	.copyindex {
		position: fixed;
		z-index: -999;
	}


	#page {
		height: 100%;
		display: flex;
		flex-direction: column;
		overflow: hidden;

		.main {
			flex: 1;
			overflow: scroll;
		}

		.navTop {
			background: #20283d;
			.van-nav-bar__title {
				color: #FFF;
			}
			.van-icon {
				color: #FFF;
			}
		}
	}

	.page-bg {
		position: fixed;
		z-index: -1;
		bottom: 0px;
		left: 0px;
		width: 100%;

	}

	.index {
		position: absolute;
		top: 30px;
		right: 30px;
		z-index: 9999;
		height: 100px;
		width: 100px;
		border-radius: 50px;
		box-shadow: 0 0 10px 1px #FFF;
		background: #FFF;
		padding: 10px;
		box-sizing: border-box;

		.logo {
			width: 100%;
		}
	}
	.nodata{width: 400px; margin: 50px auto;
		display: block; opacity: 0.6;
	}



	p {
		margin: 0px;
	}

	.f-c-lan {
		background: -moz-linear-gradient(#5ef2ff, #1368f8);
		background: -webkit-linear-gradient(#5ef2ff, #1368f8);
		background: -o-linear-gradient(#5ef2ff, #1368f8);
		background: -ms-linear-gradient(#5ef2ff, #1368f8);
		background: linear-gradient(#5ef2ff, #1368f8);

		-webkit-background-clip: text;
		color: transparent;
	}

	.btn-c-lan {
		background: -moz-linear-gradient(to top right, #1368f8 0%, #5ef2ff 60%);
		background: -webkit-linear-gradient(to top right, #1368f8 0%, #5ef2ff 60%);
		background: -o-linear-gradient(to top right, #1368f8 0%, #5ef2ff 60%);
		background: -ms-linear-gradient(to top right, #1368f8 0%, #5ef2ff 60%);
		background: linear-gradient(to top right, #1368f8 0%, #5ef2ff 60%);
	}

	.customerServer_container_mobile{
		display: none;
	}
	#customerServerTip{
		display: none;
	}
</style>
